<template>
    <div>
        <div class="header">
            <p class="title">待办任务</p>
            <input type="text" class="new-todo" 
            placeholder="请填写任务" v-model="name"
            @keyup.enter="enterName"
            >
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const name = ref('') // 代办任务的内容
const emit = defineEmits(['addTodo']) // 定义了一个叫addTodo的自定义事件
const enterName = () => {
    // 这个函数体内部，要完成内容的传递到父组件
    // 添加自定义事件————emit
    emit('addTodo', name.value);
    name.value = '' // 添加完毕之后要清空输入框
}
</script>

<style scoped>

</style>